import React, { Component } from 'react'
import './HeaderBar.style.scss'
import {withRouter} from 'react-router-dom'

class HeaderBar extends Component {
    constructor(){
        super();
        this.state={
            index:0
        }
    }
    changeIndex(item,index){
        this.props.history.push(`/home/index/${item.en}`)
        this.setState({
            index
        })
    }
    render() {
        return (
            <ul>
                {
                    this.props.topCategory&&this.props.topCategory.map((item,index)=>{
                        return <li key={index} onClick={()=>this.changeIndex(item,index)} className={this.state.index===index?'active':''}>{item.label}</li>
                    })
                }
            </ul>
        )
    }
}
export default withRouter(HeaderBar)